<template>
  <div class="refcache">
    <el-input v-model="value" placeholder="测试三级路由缓存" size="small" style="margin-bottom:20px;"></el-input>
    <el-card>
      <div style="line-height: 30px;" v-color>
        在使用Vue开发单页面应用时，我们通常会使用Vue-Router进行页面导航，Vue-Router在进行路由切换的时候，页面是会重新加载，对应的生命周期函数也会再次执行一遍，但是在有些业务场景下
      </div>
      <div>
      </div>
      <ul>
        <li style="margin-bottom:20px;" v-color>
          比如：
        </li>
        <li style="margin-bottom:20px;line-height: 30px;" v-color>
          在有分页数据列表中，切换到第三页需要查看列表对应数据的详情页面，然后返回，如果不加任何处理，列表页面会重新加载，默认显示第一页数据，而不在是之前的第三页，这样如果还需要查看之前查看数据的下一条时，还需要切换到第三页，如此反复。
        </li>
        <li v-color style="margin-bottom:20px;line-height: 30px;">
          在列表页面进行条件筛选查询，查询到对应的数据后查询详情，跳转详情页面，然后在返回，列表默认会清空查询条件，显示所有数据。
        </li>
        <li v-color>
          字体颜色不变说明缓存成功了哟～不信你刷新浏览器，颜色会自动变化的哦～
        </li>
      </ul>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'menu1-2',
  data() {
    return {
      value: ""
    }
  },
}
</script>

<style lang="scss" scoped>
.refcache {
  margin: 10px;
}
</style>